<!DOCTYPE html>
<html>
<head>                                        <!-- Please copy the following files into here: -->
<script src="./Long.min.js"></script>         <!-- https://raw.github.com/dcodeIO/Long.js/master/dist/Long.min.js -->
<script src="./ByteBufferAB.min.js"></script> <!-- https://raw.github.com/dcodeIO/ByteBuffer.js/master/dist/ByteBufferAB.min.js -->
<script src="./ProtoBuf.min.js"></script>     <!-- https://raw.github.com/dcodeIO/ProtoBuf.js/master/dist/ProtoBuf.min.js -->
<script>
if (typeof dcodeIO === 'undefined' || !dcodeIO.ProtoBuf) {
    throw(new Error("ProtoBuf.js is not present. Please see www/index.html for manual setup instructions."));
}
// Initialize ProtoBuf.js
var ProtoBuf = dcodeIO.ProtoBuf;
var Message = ProtoBuf.loadProtoFile("./example.proto").build("Message");
</script>
</head>
<body>
<textarea id="log" style="width: 100%; height: 200px"></textarea><br />
<input type="text" id="text" value="hello world!" /> <button onclick="send()">Send</button>

<script>
var log = document.getElementById("log");
var text = document.getElementById("text");

// Connect to our server: node server.js
var socket = new WebSocket("ws://localhost:8080/ws");
socket.binaryType = "arraybuffer"; // We are talking binary

function send() {
    if (socket.readyState == WebSocket.OPEN) {
        var msg = new Message(text.value);
        socket.send(msg.toArrayBuffer());
        log.value += "Sent: "+msg.text+"\n";
    } else {
        log.value += "Not connected\n";
    }
}

socket.onopen = function() {
    log.value += "Connected\n";
};

socket.onclose = function() {
    log.value += "Disconnected\n";
};
    
socket.onmessage = function(evt) {
    try {
        // Decode the Message
        var msg = Message.decode(evt.data);
        log.value += "Received: "+msg.text+"\n";
    } catch (err) {
        log.value += "Error: "+err+"\n";
    }
};

log.value = ""; // Clear log on reload
</script>
</body>
</html>
